import React, { Component } from 'react'
import D from '../SetStateDemo'
export default class A extends Component {
  render() {
    return (
      <div style={{background: 'red', width: 600+'px'}}>
        <h1>A</h1>
        {/* B组件通过render props获取到子组件 */}
        <B render={(name) => <D name={name}/>}/>
        {/* <B render={(name) => <C name={name}/>}/> */}
      </div>
    )
  }
}

class B extends Component {
  state = {
    name: 'Jack'
  }
  render() {
    return (
      <div style={{background: 'blue', width: 400+'px'}}>
        <h1>B</h1>
        {/* 通过这种方式只能在B的这个位置插入指定组件 */}
        {/* <C/> */}
        {/* 通过这种方式可以在B的这个位置插入任意组件 */}
        {/* 相当于Vue的插槽 在指定位置预留一个插槽 */}
        {this.props.render(this.state.name)}
      </div>
    )
  }
}

class C extends Component {
  render() {
    return (
      <div style={{background: 'green', width: 200+'px'}}>
        <h1>C {this.props.name}</h1>
      </div>
    )
  }
}
